<template>
  <div>
    <h1>【aty-auto-complete】 component demo</h1>
    <p>【aty-auto-complete】 本质</p>
    <aty-row class="fd-auto-complete-box">
      <aty-row>
        <aty-title level="4">1.【aty-auto-complete】基础--简单数据结构搜索</aty-title>
        <aty-row>
          <aty-col span="8">
            <aty-auto-complete
              v-model="value1"
              :data="data1"
              placeholder="input here"
              @change="change" />
          </aty-col>
          <aty-col offset="1" span="8" style="line-height:30px;">
            value1:{{value1}}
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">2.【aty-auto-complete】基础--复杂数据结构搜索</aty-title>
        <aty-panel>【simple】设置为false</aty-panel>
        <aty-row>
          <aty-col span="8">
            <aty-auto-complete
              v-model="value2"
              :data="data2"
              :simple="false"
              placeholder="input here"
              @change="change" />
          </aty-col>
          <aty-col offset="1" span="8" style="line-height:30px;">
            value2:{{value2}}
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-auto-complete】异步查询，配置url</aty-title>
        <aty-panel>【remote, remoteUrl】参数不可以缺少</aty-panel>
        <aty-row>
          <aty-col span="8">
            <aty-auto-complete
              v-model="value3"
              remote
              :simple="false"
              remoteUrl="/static/json/auto-complete.json"
              placeholder="input here"
              @change="change" />
          </aty-col>
          <aty-col offset="1" span="8" style="line-height:30px;">
            value3:{{value3}}
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">4.【aty-auto-complete】异步查询，用户自定义请求数据方法</aty-title>
        <aty-panel>【remote, remoteMethod】参数不可以缺少</aty-panel>
        <aty-row>
          <aty-col span="8">
            <aty-auto-complete
              v-model="value4"
              remote
              :simple="false"
              :remoteMethod="remoteMethod"
              placeholder="input here"
              @change="change" />
          </aty-col>
          <aty-col offset="1" span="8" style="line-height:30px;">
            value4:{{value4}}
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">5.【aty-auto-complete】异步查询，添加其他查询参数</aty-title>
        <aty-panel>【remote, remoteUrl】参数不可以缺少</aty-panel>
        <aty-row>
          <aty-col span="8">
            <aty-auto-complete
              v-model="value5"
              remote
              :simple="false"

              remoteUrl="/static/json/auto-complete.json"
              :remoteExtendsParams="remoteExtendsParams"
              placeholder="input here"
              @change="change" />
          </aty-col>
          <aty-col offset="1" span="8" style="line-height:30px;">
            value5:{{value5}}
          </aty-col>
        </aty-row>
      </aty-row>

    </aty-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value1: '',
      value2: '2',
      value3: '2',
      value4: '',
      value5: '',
      data1: [1, 12, 13, 15, 16, 25, 29, 23, 26, 27, 223, 215],
      data2: (function (len) {
        var _data = []
        for (let i = 0; i < len; i++) {
          _data.push({
            name: '搜索到的数据' + i,
            id: 'id' + i
          })
        }
        return _data
      })(20),
      remoteExtendsParams: {
        type: 'ceshi',
        sex: 'boy'
      }
    }
  },
  methods: {
    change (value) {
      console.log(value)
    },
    remoteMethod (query, callback) {
      console.log(query)
      setTimeout(() => {
        const _data = []
        for (let i = 0; i < 6; i++) {
          _data.push({
            name: '搜索到的数据' + query + i,
            id: 'id' + i
          })
        }
        callback(_data)
      }, 300)
    }
  },
  mounted () {
    setTimeout(() => {
      this.remoteExtendsParams = {
        type: 'ceshi2',
        sex: 'girl'
      }
    }, 3000)
  }
  //  components: { Alert, Icon }
}
</script>
<style lang="less" type="text/less">
    .fd-auto-complete-box {
        margin: 0 20px;
        text-align:left;
        >.aty-row {
             padding-bottom: 10px;
         }
    }
</style>
